<template>
  <div class="batch-body">
    <el-dialog title="你确定要删除如下图片吗" :visible.sync="centerDialogVisible" width="80%" center >
      <el-row class="el-dialog-body" :gutter="10" v-loading='isloading'>
        <el-col :span="4" v-for="(item,index) in dataList" :key="item.id">
          <el-card class="card-card" shadow="hover">
            <!-- 批量管理的checkBox -->
            <div class="image-body">
              <svg-icon
                @click="delImageitem(index)"
                class="image-delete"
                icon-class="delete"
                class-name="custom-class"
              />
              <img class="image" :src="`${host}/${item.dir}/${item.fileName}`" alt />
            </div>

            <div class="footter">
              <div class="footter-input">
                <div>
                  <span>名称：</span>
                </div>
                <span class="name">{{Boolean(item.title)? item.title : '未命名'}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import setting from "@/settings";
import material from "@/api/materialManager/material";
export default {
  data() {
    return {
      host: setting.host,
      dataList: [],
      centerDialogVisible: false,
      isloading:false
    };
  },
  methods: {
    confirm() {
        this.isloading=true
      var temp = this.dataList;
      //   为了让isloading的结束有个标杆，所以要用promise.all
    //   var promise = new Promise();
      var tempArr = [];
      for (let i in temp) {
        var tempPromise = material.delImage({
          id: temp[i].id
        }).then(res=>{
          // 一百个里面有若干个请求失败了，需要将删除成功的数据进行删除
         // 这种情况应该只是偶尔发生，可以实现，但是很费性能
          // 将下标返回，下标在promise.all的then方法的res中会形成一个数组
          // 在promise.all中对数据做处理数组，去除空的数据
          // 根据这个数组对dataList做处理，这个数组中的下标就是已经被删除数据的下标
          // 将对应下标上的数据变为空，之后对dataList做去空处理
          // 最后处理完的数组去渲染页面......
          return i
          // console.log(i)
        });
        tempArr.push(tempPromise)
      }
        Promise.all(tempArr).then(res=>{
            this.centerDialogVisible = false;
            this.isloading=false
            this.$message({
            message: `并没有回收站，如果后悔了，请节哀`,
            type: "success"
          });

          setTimeout(()=>{
              this.$emit('getImageList')
          },500)
        }).catch(res=>{
            this.isloading=false
            this.centerDialogVisible = false
            this.$message({
            message: `网络有问题，部分图片未删除成功`,
            type: "error"
          });
            setTimeout(()=>{
              this.$emit('getImageList')
          },500)
        });
    },
    // 删除图片的页面时，将相应的数据去除
    delImageitem(index) {
      this.dataList.splice(index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.batch-body {
  .el-dialog-body {
    min-height: 300px;
  }
  img {
    width: 120px;
    height: 120px;
  }
  .image-body {
    position: relative;
    .image-delete {
      color: #F56C6C;
      position: absolute;
      right: -15px;
      top: -15px;
      font-size: 30px;
    }
  }
}
</style>